import { createComponent} from '../utils/component-factory'
import {typeOptions, sizeOptions, effectOptions } from '../utils/Types'

export default createComponent({
  name: 'el-tag',
  label: 'Tag 标签',
  category: 'Data',
  canBeSlotContent: true,
  props: {
    type: {
      label: '类型',
      type: 'select',
      default: '',
      description: '标签类型',
      editorProps: {
        options: typeOptions.tag
      }
    },
    closable: {
      label: '可关闭',
      type: 'boolean',
      default: false,
      description: '是否可关闭',
      editorProps: {
        component: 'el-switch',
        activeText: '可关闭',
        inactiveText: '不可关闭'
      }
    },
    disableTransitions: {
      label: '禁用渐变动画',
      type: 'boolean',
      default: false,
      description: '是否禁用渐变动画',
      editorProps: {
        component: 'el-switch'
      }
    },
    hit: {
      label: '边框描边',
      type: 'boolean',
      default: false,
      description: '是否有边框描边',
      editorProps: {
        component: 'el-switch'
      }
    },
    color: {
      label: '背景色',
      type: 'input',
      default: '',
      description: '标签背景色(支持颜色名称/HEX/RGB)'
    },
    size: {
      label: '尺寸',
      type: 'select',
      default: '',
      description: '标签尺寸',
      editorProps: {
        options: sizeOptions
      }
    },
    effect: {
      label: '主题',
      type: 'select',
      default: 'light',
      description: '标签主题',
      editorProps: {
        options: effectOptions.tag
      }
    }
  },
  events: {
    close: {
      label: '关闭',
      description: '关闭标签时触发'
    },
    click: {
      label: '点击',
      description: '点击标签时触发'
    }
  },
  slots: {
    default: {
      label: '默认',
      default: '标签内容',
      description: '标签内容'
    }
  }
})